<template>
  <div class="h-87">
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:30%">
      <div data-bottom class="second-center">
        <page-header text="生产总值"> <v-chart v-if="shchzzh.isShow" :options="shchzzh" ref="sczz" /> </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农业资金服务对象"> <v-chart v-if="pies.isShow" :options="pies" /> </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.4%" />
    <!-- 高 607px -->
    <!-- 高 607px -->
    <div class="flex justify-between three-sides-4" style="height:31.29%">
      <div data-bottom class="three-sides">
        <page-header text="人均可支配收入"> <v-chart :options="histogram" /> </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="农业资金来源"> <v-chart :options="rose" /> </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="贷款余额及增速"> <v-chart v-if="optionNmrjnsr.isShow" :options="optionNmrjnsr" /> </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="贷款种类分布"> <v-chart v-if="pie.isShow" :options="pie" /> </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.4%" />
    <!-- 高 607px -->
    <div class="flex justify-between three-sides-4" style="height:31.29%">
      <div data-bottom class="three-sides">
        <page-header text="农户资金支出"> <v-chart :options="histogram1"/></page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="农业资金投入领域"><v-chart :options="lineChart" /> </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="企业存款数及存贷比"> <v-chart v-if="optionDkqys.isShow" :options="optionDkqys" /> </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="农业保险购买总额及农户覆盖率"> <v-chart v-if="optionBxgme.isShow" :options="optionBxgme" /> </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import PageHeader from 'header/PageHeader.vue'
import YlCharts from '@/components/Charts/ylCharts.vue'
import Particulars from 'header/particulars.vue'
import theme from '@/utils/echarts-theme.json'
import { districtsGDP, getTowSideStat, getSingleValue } from '@/api/connector'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
        htmlStr += seriesName + '：' + value + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'IndustrialEconomy',
  // eslint-disable-next-line vue/no-unused-components
  components: { YlCharts, PageHeader, Particulars },
  data() {
    return {
      theme: theme,
      shchzzh: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + value + '万元' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          right: 50,
          data: ['第一产业', '第二产业', '第三产业']
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          name: '万元'
        },
        series: []
      },
      optionSczz: {
        isShow: false,
        baseOption: {
          title: {
            subtext: ' '
          },
          tooltip: {},
          legend: {
            left: 'right',
            data: ['第一产业', '第二产业', '第三产业'],
            selected: {
              GDP: false,
              金融: false,
              房地产: false
            }
          },
          calculable: true,
          // grid: {
          //   top: 80,
          //   bottom: 100,
          //   tooltip: {
          //     trigger: 'axis',
          //     axisPointer: {
          //       type: 'shadow',
          //       label: {
          //         show: true,
          //         formatter: function(params) {
          //           return params.value.replace('\n', '')
          //         }
          //       }
          //     }
          //   }
          // },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              data: [],
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'GDP（亿元）'
            }
          ],
          series: [
            { name: '第一产业', type: 'bar' },
            { name: '第二产业', type: 'bar' },
            { name: '第三产业', type: 'bar' },
            {
              name: 'GDP占比',
              type: 'pie',
              center: ['93%', '75%'],
              radius: '28%',
              z: 100
            }
          ]
        },
        options: [
          {
            title: { text: '2019全国宏观经济指标' },
            series: [
              { data: [] },
              { data: [] },
              { data: [] },
              {
                data: [
                  { name: '第一产业', value: [] },
                  { name: '第二产业', value: [] },
                  { name: '第三产业', value: [] }
                ]
              }
            ]
          }
        ]
      },
      menuLevel: 1,
      category: '',
      dataGDPval: [],
      optionNmrjnsr: {
        isShow: false,
        tooltip: tooltip('万元', '%'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: ['2019', '2018']
        },
        yAxis: [
          {
            name: '贷款余额(万元)',

            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            name: '贷款增速(%)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        grid: {
          left: '6%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: ' 贷款余额增速',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: ' ',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      optionDkqys: {
        isShow: false,
        tooltip: tooltip('万元', '%'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: ' 存款数(万元)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            name: '存贷比(%)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        grid: {
          left: '7%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '存款数',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: '存贷比',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      optionBxgme: {
        isShow: false,
        tooltip: tooltip('万元', '%'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          data: ['2019', '2018'],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        yAxis: [
          {
            name: '保险交易总额(万元)',
            position: 'right',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            name: '农户覆盖率(%)',
            position: 'left',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        grid: {
          left: '7%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: ' 交易总额',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: '农户覆盖率',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      lineChart: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + value + '万元' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          data: ['农业私人产品的农业资金', '农业公共产品的农业资金']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: ['1', '2', '3', '4', '5', '6', '7']
        },
        yAxis: {
          name: '万元',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
        },
        series: [
          {
            name: '农业私人产品的农业资金',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '农业公共产品的农业资金',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      },
      histogram: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + value + '万元' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '34%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '万元',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: []
      },
      histogram1: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + value + '万元' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '38%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '万元',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: []
      },
      pies: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}万元 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        // title: {
        //   text: '1',
        //   x: 'center',
        //   y: 'center',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // }, 
        title:[
          {
            text: '',
            left: 'center',
            top: '40%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          {
            id: 'statistic',
            text: "万元",
            left: 'center',
            top: '50%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          }
        ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'bottom',
              offset: [0, 50],
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)';
                //   return params.value + ' 万元'
                // } else {
                //   return ''
                // }

                return params.percent + '%';
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      pie: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}万元 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        // title: {
        //   text: '1',
        //   x: 'center',
        //   y: 'center',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        title:[
          {
            text: '',
            left: 'center',
            top: '40%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          {
            id: 'statistic',
            text: "万元",
            left: 'center',
            top: '50%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'bottom',
              offset: [0, 50],
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)';
                //   return params.value + ' 万元'
                // } else {
                //   return ''
                // }

                return params.percent + '%';
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      rose: {
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {c}万元 ({d}%)'
        },
        series: [
          {
            name: '半径模式',
            type: 'pie',
            radius: [10, 50],
            center: ['50%', '40%'],
            roseType: 'radius',
            label: {
              show: true,
              position: 'bottom',
              offset: [0, 50],
              formatter: function(params) {
                // let text = params.name;
                // let value_format = params.value;
                // let percent_format = '('+params.percent + '%)';
                // if (text.length <= 6) {
                //   // ${value_format}\n
                //   return `${text}\n${percent_format}`;
                // } else if (text.length > 6 && text.length <= 12) {
                //   return text = `${text.slice(0, 6)}\n${text.slice(6)}\n${percent_format}`
                // } else if (text.length > 12 && text.length <= 18) {
                //   return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}\n${percent_format}`
                // } else if (text.length > 18 && text.length <= 24) {
                //   return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}\n${percent_format}`
                // } else if (text.length > 24 && text.length <= 30) {
                //   return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}\n${percent_format}`
                // } else if (text.length > 30) {
                //   return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}\n${percent_format}`
                // }


                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)';
                //   return params.value + ' 万元'
                // } else {
                //   return ''
                // }

                return params.percent + '%';
              }
            },
            labelLine: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { value: 10, name: 'rose1' },
              { value: 5, name: 'rose2' },
              { value: 15, name: 'rose3' },
              { value: 25, name: 'rose4' },
              { value: 20, name: 'rose5' },
              { value: 35, name: 'rose6' },
              { value: 30, name: 'rose7' },
              { value: 40, name: 'rose8' }
            ]
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    toFour(name, isCodew, typeCode) {
      if (name === isCodew) {
        this.$router.push({ name: 'Fourstage', query: { code: '000202', name: this.$route.matched[0].name, typeCode: typeCode || isCodew } })
      }
    },
    init() {
      // 生产总值
      districtsGDP().then((res) => {
        const shchzzh = this.shchzzh

        const year = []
        const name = []
        const primaryProduction = []
        const secondIndustry = []
        const thirdIndustry = []
        const names = ['第一产业', '第二产业', '第三产业']
        const dataGDPval = res.body.data
        for (const items of dataGDPval) {
          year.push(items.year)
          name.push(items.name)
          primaryProduction.push(items.primaryProduction)
          secondIndustry.push(items.secondIndustry)
          thirdIndustry.push(items.thirdIndustry)
        }
        var gdp = [primaryProduction, secondIndustry, thirdIndustry]
        shchzzh.xAxis.data = name
        Object.keys(gdp).forEach((item, index) => {
          shchzzh.series.push({
            name: names[index],
            type: 'bar',
            data: gdp[index]
          })
        })
        shchzzh.isShow = true
        this.toLink(this, 'sczz', (p) => {
          console.log(p)
          this.toFour(p.seriesName, '第一产业', '农业生产总值')
        })
      })
      // 农业资金来源
      getSingleValue({
        groupCode: 'NYZJLY'
      }).then((res) => {
        this.rose.legend.data = res.body.names
        // eslint-disable-next-line no-undef
        var i = 0
        var series = []
        for (i = 0; i < res.body.names.length; i++) {
          var item = {
            name: res.body.names[i],
            value: res.body.values[i]
          }
          series.push(item)
        }
        this.rose.series[0].data = series
        // this.rose.series[1].data = series
        this.rose.isShow = true
      })
      // 农业资金服务对象
      getSingleValue({
        groupCode: 'NYZJFWDX'
      }).then((res) => {
        this.pies.legend.data = res.body.names
        this.pies.series[0].data = []
        // eslint-disable-next-line no-undef
        var i = 0
        var series = []
        var pies = 0
        for (i = 0; i < res.body.names.length; i++) {
          var item = {
            name: res.body.names[i],
            value: res.body.values[i]
          }
          pies += res.body.values[i]
          series.push(item)
        }
        this.pies.title[0].text = parseFloat(pies).toFixed(2)
        this.pies.series[0].data = series
        this.pies.isShow = true
      })
      // 贷款种类分布
      getSingleValue({
        groupCode: 'DKZLFB'
      }).then((res) => {
        this.pie.legend.data = res.body.names
        this.pie.series[0].data = []
        // eslint-disable-next-line no-undef
        var i = 0
        var series = []
        var pies = 0
        for (i = 0; i < res.body.names.length; i++) {
          var item = {
            name: res.body.names[i],
            value: res.body.values[i]
          }
          pies += res.body.values[i]
          series.push(item)
        }
        this.pie.title[0].text = pies
        this.pie.series[0].data = series
        this.pie.isShow = true
      })
      // 贷款企业数及平均企业贷款额
      getTowSideStat({ groupCode: 'DKQYSJPJQYDKE' }).then((data) => {
        const val = data.body
        const optionDkqys = this.optionDkqys
        optionDkqys.xAxis.data = val.dateSet
        optionDkqys.legend.data = val.typeSet
        var typeValueListMap = data.body.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
        }
        this.optionDkqys.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: index === 0 ? 'bar' : 'line',
            yAxisIndex: index
          }
        })
        optionDkqys.isShow = true
      })
      // 农业保险购买总额及农户覆盖率
      getTowSideStat({ groupCode: 'NYBXGMZEJNHFGL' }).then((data) => {
        const val = data.body
        const optionBxgme = this.optionBxgme
        optionBxgme.xAxis.data = val.dateSet
        optionBxgme.legend.data = val.typeSet
        this.optionBxgme.legend.data = data.body.typeSet
        var typeValueListMap = data.body.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.optionBxgme.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: index === 0 ? 'bar' : 'line',
            yAxisIndex: index
          }
        })
        optionBxgme.isShow = true
      })
      // 贷款余额及笔数
      getTowSideStat({ groupCode: 'DKYEJBS' }).then((data) => {
        const val = data.body
        console.log('贷款余额及增数', val)
        const optionNmrjnsr = this.optionNmrjnsr
        optionNmrjnsr.xAxis.data = val.dateSet
        optionNmrjnsr.legend.data = val.typeSet
        var typeValueListMap = val.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
        }
        this.optionNmrjnsr.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: index === 0 ? 'bar' : 'line',
            yAxisIndex: index
          }
        })
        optionNmrjnsr.isShow = true
      })
      // 农业资金投入领域
      getTowSideStat({ groupCode: 'NYZJTRLY' }).then((data) => {
        const val = data.body
        const lineChart = this.lineChart
        lineChart.xAxis.data = val.dateSet
        lineChart.legend.data = val.typeSet
        this.lineChart.legend.data = data.body.typeSet
        var typeValueListMap = data.body.typeValueListMap
        var color = ['#3BB4FF', '#6647FF', '#19C4A1', '#CEB711', '#D69114', '#1C6DCC', '#11A0BB', '#11BB82', '#B325C8', '#D3485F']
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
        }
        this.lineChart.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: 'line'
          }
        })

        lineChart.isShow = true
      })
      // 农户资金支出
      getTowSideStat({ groupCode: 'NHZJZC' }).then((res) => {
        const val = res.body
        const histogram1 = this.histogram1
        histogram1.xAxis.data = val.dateSet
        histogram1.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item, index) => {
          histogram1.series.push({
            name: item,
            type: 'bar',
            barMaxWidth: 30,
            stack: '余额',
            data: val.typeValueListMap[item]
          })
        })
        this.histogram1.isShow = true
      })
      // 人均可支配收入
      getTowSideStat({ groupCode: 'NHZJSR' }).then((res) => {
        const val = res.body
        const histogram = this.histogram
        histogram.xAxis.data = val.dateSet
        histogram.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item, index) => {
          histogram.series.push({
            name: item,
            type: 'bar',
            barMaxWidth: 30,
            stack: '余额',
            data: val.typeValueListMap[item]
          })
        })
        this.histogram.isShow = true
      })
    }
  }
}
</script>
<style scoped>
.second-center {
  width: 66.06%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.5%;
  height: 100%;
  background-size: 100% 100% !important;
}

.three-sides-4 .three-sides {
  width: 24.18%;
  height: 100%;
  background-size: 100% 100% !important;
}
.three-sides-4 .three-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
